/*
 * @Author: Await
 * @Date: 2025-05-09 11:00:00
 * @LastEditors: Await
 * @LastEditTime: 2025-05-09 11:00:00
 * @Description: 图表加载状态组件
 */

import React from 'react';
import { Spin } from 'antd';
import { ChartLoadingProps } from './types';

/**
 * 图表加载状态组件
 * 在图表加载过程中显示加载动画
 */
const ChartLoading: React.FC<ChartLoadingProps> = ({ visible, text = "加载中..." }) => {
    if (!visible) return null;

    return (
        <div
            style={{
                position: 'absolute',
                top: 0,
                left: 0,
                right: 0,
                bottom: 0,
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                zIndex: 10,
                background: 'rgba(255, 255, 255, 0.85)', // 增加背景不透明度
                backdropFilter: 'blur(4px)', // 增加模糊效果
                transition: 'all 0.3s',
                pointerEvents: 'none' // 确保不阻挡鼠标事件
            }}
        >
            <Spin
                size="large"
                // Ant Design要求tip属性需要在嵌套模式下使用
                spinning={visible}
            >
                <div style={{
                    minHeight: 80,
                    minWidth: 80,
                    display: 'flex',
                    flexDirection: 'column',
                    alignItems: 'center',
                    justifyContent: 'center',
                    padding: '20px 40px'
                }}>
                    <div style={{ marginTop: 8, color: '#1890ff' }}>{text}</div>
                </div>
            </Spin>
        </div>
    );
};

export default ChartLoading;